<template>
  <div style="padding: 36px">
    <el-row :gutter="32">
      <el-col :span="12">
        <el-card>
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">今日部门案件办理情况</div>
          </div>
          <div style="width: 100%; height: 300px" id="left_bar_two"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">当月案件处理情况</div>
          </div>
          <div style="width: 100%; height: 300px" id="left_bar"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="32" style="margin-top: 20px">
      <el-col :span="16">
        <el-card>
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">近期案件诉求量增长率分析</div>
          </div>
          <div style="display:flex;">
            <div style="height: 300px;width: 50%" id="line_cahr"></div>
            <div style="height: 300px;width: 50%" id="bie_charts"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">案件发生区域分析</div>
          </div>
          <div style="width: 100%; height: 300px" id="bie_data"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { caseHandling, casesGrow, casesRegion, handleAnalytics, recentTrend } from '@/api/api'
import { seeMonthdate } from '../../api/aapal/index.js'
export default {
  name: 'visualization',
  data() {
    return {}
  },
  mounted() {
    // this.initEchart()
    this.initData()
  },
  methods: {
    initData() {
      recentTrend().then(res => {
        var xdata = []
        var data1 = []
        var data2 = []
        var data3 = []
        var data4 = []
        res.data.caseDisposeTrend.forEach((item) => {
          // 提取日的部分
          var day = item.statDate.split('-')[2]+'日'
          xdata.push(day)
          data1.push(item.dailyCount)
        })
        res.data.caseMainTrend.forEach((item) => {
          data2.push(item.dailyCount)
        })
        res.data.caseSuperviseTrend.forEach((item) => {
          data3.push(item.dailyCount)
        })
        res.data.caseWarningTrend.forEach((item) => {
          data4.push(item.dailyCount)
        })

        var mart3 = echarts.init(document.getElementById('line_cahr'))
        let myData8 = xdata;
        let option3 = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 233,0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(255, 255, 255,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 255, 233,0)",
                    },
                  ],
                  global: false,
                },
              },
            },
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
            confine: true,//限制溢出屏幕外
            backgroundColor: "black", //设置背景颜色
          },

          grid: {
            containLabel: true,
            bottom: "2%",
            top: "22%",
            left: "2%",
            right: "2%",
          },
          legend: {
            top: "10%",
            right: "14%",
            itemWidth: 16,
            itemHeight: 10,
            itemGap: 30,
            textStyle: {
              fontSize: 14,
              color: "#000",
              padding: [0, 0, 0, 4],
            },
          },
          xAxis: {
            data: myData8,
            axisLabel: {
              interval: 0,
              show: true,
              fontSize: 14,
              color: "#000",
            },
            axisLine: {
              show: true,
              lineStyle: {
                show: true,
                color: "rgba(54, 153, 255, .4)",
              },
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: [
            {
              name: "次",
              type: "value",
              nameTextStyle: {
                color: "#000",
                fontSize: 12,
                align: "center",
                padding: [0, 30, 0, 0],
              },
              // splitNumber: 5,
              axisLabel: {
                show: true,
                fontSize: 12,
                color: "#000",
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#000",
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(54, 153, 255, .4)",
                  type: "dashed",
                },
              },
            },
          ],
          series: [
            {
              name: "诉求数",
              type: "line",
              showSymbol: true,
              symbolSize: 8,
              symbol: "circle",
              lineStyle: {
                normal: {
                  color: "#FF8E3C",
                },
              },
              itemStyle: {
                color: "#FF8E3C",
                borderColor: "#fff",
                borderWidth: 2,
              },
              data: data2, // 折线图的数据
            },
            {
              name: "处理数",
              type: "line",
              showSymbol: true,
              symbol: "circle",
              symbolSize: 8,
              lineStyle: {
                normal: {
                  color: "#00A0E9",
                },
              },
              itemStyle: {
                color: "#00A0E9",
                borderColor: "#fff",
                borderWidth: 2,
              },
              data: data1, // 折线图的数据
            },
            {
              name: "预警数",
              type: "line",
              showSymbol: true,
              symbolSize: 8,
              symbol: "circle",
              lineStyle: {
                normal: {
                  color: "#02D6B0",
                },
              },
              itemStyle: {
                color: "#02D6B0",
                borderColor: "#fff",
                borderWidth: 2,
              },
              data: data4, // 折线图的数据
            },
            {
              name: "督办数量",
              type: "line",
              showSymbol: true,
              symbolSize: 8,
              symbol: "circle",
              lineStyle: {
                normal: {
                  color: "#be2ae7",
                },
              },
              itemStyle: {
                color: "#be2ae7",
                borderColor: "#fff",
                borderWidth: 2,
              },
              data: data3, // 折线图的数据
            },
          ],
        };
        mart3.setOption(option3)
      })
      handleAnalytics().then(res => {
        var data = [{
          name: '受理占比',
          value: 100 - res.data.noDisposePercent
        }, {
          name: '未受理占比',
          value: res.data.noDisposePercent
        }]
        var mart4 = echarts.init(document.getElementById('bie_charts'))
        const colorList = [
          '#FFA600',
          '#FEDB65',
          '#026DB2',
          '#12FEE0',
          '#6DD400',
          '#44D7B6',
          '#5C64FF',
          '#6988F8',
          '#0E5FFF',
          '#2DE1FD',
          '#8221F1',
          '#B26DF6',
        ]
        var option4 = {
          // 环形图中间默认显示文字
          title: {
            show: true,
            text: '诉求总数',
            itemGap: 10, //主副标题之间的距离
            x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: '35%',
            subtext: res.data.CaseMainCount,
            textStyle: {
              fontSize: 14,
              color: '#999999'
            },
            subtextStyle: {//副标题文本样式{"color": "#aaa"}
              fontSize: 19,
              fontWeight: "bold",
              color: '#333333'
            },
          },
          tooltip: {
            extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
            backgroundColor: 'rgba(0,0,0,0.75)',
            // padding: [12, 16, 12, 16],
            textStyle: {
              color: '#FFFFFF'
            },
            // 悬浮的位置可以调整，总距离左边10px
            position: (point) => {
              // return ['100', point[1]]
            },
            formatter: (param) => {
              let { name, value } = param
              let result = `<div>${name}：${value}(%)</div>`
              return result
            }
          },
          legend: {
            orient: 'horizontal',
            itemWidth: 16,
            itemHeight: 16,
            icon: 'circle',
            left: 'center',
            bottom: '10%',
            data: data,
            textStyle: {
              color: 'rgba(0,0,0,0.65)'
            },
            formatter: (name) => {
              const value = data.find(item => item.name === name).value
              return `${name}：${value} %`
            }
          },
          series: [{
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '40%'], // 图形位置
            label: { // 鼠标悬浮具体数据显示
              show: false
            },
            data: data,
            itemStyle: {
              color: function (params) {
                var index = params.dataIndex + params.dataIndex;
                const colorStops = [{
                  offset: 1,
                  color: colorList[index]
                }, {
                  offset: 0,
                  color: colorList[index + 1]
                }];
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorStops)
              },
            },
          }]
        };
        mart4.setOption(option4)
      })
      casesRegion().then(res => {
        var data = []
        res.data.forEach((item) => {
          data.push({
            name: item.dictLabel,
            value: item.caseCount
          })
        })
        var mart5 = echarts.init(document.getElementById('bie_data'))
        var option5 = {
          toolbox: {
            show: false,
          },
          series: [
            {
              name: '乡镇诉求分析',
              type: 'pie',
              radius: ['20%', '80%'],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: data
            }
          ]
        };
        mart5.setOption(option5)
      })
      const date = new Date(); // 假设这是需要转换的日期对象
      const yyyy = date.getFullYear();
      const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份需要加1，并且补零
      const dd = String(date.getDate()).padStart(2, '0'); // 日需要补零
      const convertedDate = yyyy + '-' + mm + '-' + dd
      caseHandling(convertedDate).then(res => {
        var xdatas = []
        var data1 = []
        var data2 = []
        var data3 = []
        res.data.forEach((item) => {
          xdatas.push(item.deptName)
          data1.push(item.pendingCount)
          data2.push(item.completedCount)
          data3.push(item.totalCount)
        })
        var echart2 = echarts.init(document.getElementById('left_bar_two'))
        var option1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {
            top: '7%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: xdatas
          },
          series: [
            {
              name: '待办案件量',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data1
            },
            {
              name: '办结案件数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data2
            },
            {
              name: '现有案件总数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data3
            },
          ]
        };
        echart2.setOption(option1)
      })
      seeMonthdate().then(res => {
        // 提取所有不重复的日期作为 x 轴数据
        var allDates = new Set();
        res.data.disposeStatus0.forEach(item => allDates.add(item.statDate));
        res.data.disposeStatus1.forEach(item => allDates.add(item.statDate));
        var xData = Array.from(allDates).sort(); // 对日期进行排序

        // 初始化两个数组来存储每个系列的数据
        var data0 = [];
        var data1 = [];

        // 填充 data0 和 data1
        xData.forEach(date => {
          var item0 = res.data.disposeStatus0.find(item => item.statDate === date);
          var item1 = res.data.disposeStatus1.find(item => item.statDate === date);
          data0.push(item0 ? parseInt(item0.dailyCount) : 0);
          data1.push(item1 ? parseInt(item1.dailyCount) : 0);
        });

        var echart1 = echarts.init(document.getElementById('left_bar'));
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            data: xData,
            axisLabel: {
              interval: 0,
              show: true,
              fontSize: 14,
              color: "#000",
            },
          },
          yAxis: {
            type: "value",
            name: "案件数量",
            nameTextStyle: {
              color: "#000",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.15)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#163a5f",
                width: 2,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#000",
                fontSize: 12,
              },
            },
          },
          series: [
            {
              name: "诉求数",
              type: "bar",
              barWidth: 15,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: '#13D5FC' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#2059B8' // 100% 处的颜色
                    }
                  ]
                },
                barBorderRadius: [20, 20, 20, 20],
              },
              label: {
                show: true,
                position: "top",
                color: "#1ACDDC",
                formatter: "{c}" + "次",
              },
              data: data0,
            },
            {
              name: "处理完结数",
              type: "bar",
              barWidth: 15,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: '#FF6B6B' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FF1E1E' // 100% 处的颜色
                    }
                  ]
                },
                barBorderRadius: [20, 20, 20, 20],
              },
              label: {
                show: true,
                position: "top",
                color: "#FF1E1E",
                formatter: "{c}" + "次",
              },
              data: data1,
            },
          ],
        };

        echart1.setOption(option);
      });



    },
    initEchart() {




      var echart1 = echarts.init(document.getElementById('left_bar'))
      let reData = {
        xData: xdata,
        seriesData: [63, 99, 65, 85, 75, 78, 55]
      }
      var option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, 0)",
          textStyle: {
            color: "#FFF",
          },
        },
        grid: {
          left: "10%",
          top: "18%",
          right: "5%",
          bottom: "25%",
        },
        xAxis: {
          data: xdata,
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#163a5f",
              width: 2,
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#000", //X轴文字颜色
              fontSize: 12,
            },
            interval: 0,
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 4; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于5,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#000",
              fontSize: 12,
            },

            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.15)",
                // type: 'dashed', // dotted 虚线
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#000",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#000",
                fontSize: 12,
              },
            },
          },
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#BDD8FB",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "#CED2DB",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false, //隐藏X轴轴线
              lineStyle: {
                color: "#163a5f",
                width: 2,
              },
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#797A7F",
                fontSize: 12,
              },
            },
          },
        ],
        series: [
          {
            name: "下载数",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              // color: new graphic.LinearGradient(0, 0, 0, 1, [
              //    {
              //       offset: 0,
              //       color: "#00A2FF",
              //    },
              //    {
              //       offset: 1,
              //       color: "#00CCD2",
              //    },
              // ]),
              color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                  {
                    offset: 0.1,
                    color: '#13D5FC' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#2059B8' // 100% 处的颜色
                  }
                ]
              },
              barBorderRadius: [20, 20, 20, 20],
            },
            label: {
              show: false,
              position: "top",
              distance: 0,
              color: "#1ACDDC",
              formatter: "{c}" + "次",
            },
            data: reData.seriesData,
          },
          {
            // name: '背景',
            type: "bar",
            barWidth: "15px",
            xAxisIndex: 0,
            yAxisIndex: 1,
            barGap: "-110%",
            data: [100, 100, 100, 100, 100, 100, 100], //背景阴影长度
            itemStyle: {
              normal: {
                color: "rgba(255,255,255,0.039)",
                barBorderRadius: [20, 20, 20, 20],
              },
            },
            tooltip: {
              show: false,
            },
            zlevel: 9,
          },
        ],
      };
      echart1.setOption(option)



    }
  }
}
</script>

<style scoped></style>
